import React, { Component } from 'react';
import Header from './compnents/Header';
import List from './compnents/List';
import Footer from './compnents/Footer';
import './App.css'

class App extends Component {

  // 初始化状态
  state = {todos:[
      {id:'001', name:'吃饭', done:true},
      {id:'002', name:'睡觉', done:true},
      {id:'003', name:'打豆豆', done:false},
    ],
  }

  // 增加 todos 中的对象
  addTodo = (todoObj)=>{
    // 获取原始状态
    const {todos} = this.state
    // 追加
    const newTodos = [todoObj, ...todos]
    // 更新
    this.setState({todos:newTodos})
    console.log(todos, newTodos)
  }

  // 更新 todos done状态
  updateTodo = (id, done)=>{
    // 获取todos初始状态
    const {todos} = this.state
    // 匹配处理数据
    const newTodos = todos.map((todo)=>{
      // 判断id是否一致，是，修改done值，不是，返回原 todo
      if(todo.id === id) return {...todo, done:done}
      else return todo
    })
    // console.log('newTodos', newTodos)
    // 更新状态
    this.setState({todos:newTodos})
  }

  // 更新 todo 
  deleteTodo = (id)=>{
    // 获取todos初始状态
    const {todos} = this.state
    // 
    const newTodos = todos.filter((todo)=>{
      return todo.id !== id
    })
    console.log('newTodos', newTodos)
    // 更新状态
    this.setState({todos:newTodos})
  }

  // 用于全选
  todoCheckAll = (done)=>{
    // 获取原始状态
    const {todos} = this.state
    // 加工数据
    const newTodos = todos.map((todo)=>{
      // 将勾选状态修改
      return {...todo, done:done}
    })
    // 更新状态
    this.setState({todos:newTodos})
  }

  // 清除已完成
  clearDoneTodo = ()=>{
    const {todos} = this.state
    // 筛选 todo.done 为 false的数据
    const newTodos = todos.filter((todo)=>{
      return !todo.done
    })
    // console.log("clearDoneTodo.newTodos", newTodos)
    // 更新状态
    this.setState({todos:newTodos})
  }

  render() {
    const {todos} = this.state
    return (
        <div className="todoContainer">
          <div className="todoWrap">
            <Header addTodo={this.addTodo}/>
            <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
            <Footer todos={todos} todoCheckAll={this.todoCheckAll} clearDoneTodo={this.clearDoneTodo}/>
          </div>
        </div>
    );
  }
}

export default App;